<%@ include file="/common/taglibs.jsp"%>

<head>
<title><fmt:message key="signup.title" /></title>
</head>

<body class="signup" />

<%-- <div class="span2">
    <h2><fmt:message key="signup.heading"/></h2>
    <fmt:message key="signup.message"/>
</div> --%>
<div class="span7">
	<s:form name="signupForm" action="saveSignup" method="post"
		validate="true" autocomplete="off" theme="bootstrap"
		label="%{getText('signup.heading')}" cssClass="well form-horizontal">


		<s:textfield key="user.username" required="true"/>
		<s:password key="user.password" showPassword="true" required="true" />
		<s:password key="user.confirmPassword" required="true"
			showPassword="true" />
		<s:textfield key="user.companyName" required="true" />
		
		<crs:idtype  required="true"  key="user.idtype" listKey="value" listValue="label"/>
		
		<s:textfield key="user.idnumber" required="true"/>
		
		<s:textfield key="user.contact" required="true"/>
		<s:textfield key="user.contactNumber" required="true" />
		<s:textfield key="user.phoneNumber"  required="true" />
		<s:textfield key="user.email" required="true" />
		<s:textfield key="user.fax"/>
		<s:textfield key="user.address.address" required="true" />
		<s:textfield key="user.address.postalCode" required="true"/>
		
		<div class="control-group">
			<label class="control-label"> 
				<fmt:message key="label.captcha" />
				<span class="required">*</span>
			</label>
			<div class="controls">
			
				<div class="span8">
    				<input type="text" name="captcha"/>
    			</div>
    	
    			<div class="span4">
    				<img src="<c:url value='/getCaptcha'/>" id="Verify"  style="cursor:pointer;"/>
    			</div>
    			
			</div>
		</div>		


		<div id="actions" class="form-actions">
			<s:submit type="button" cssClass="btn btn-primary"
				key="button.register" theme="simple">
				<i class="icon-ok icon-white"></i>
				<fmt:message key="button.register" />
			</s:submit>
			
			<a class="btn" href='<c:url value="/"/>'><i class="icon-remove"></i><fmt:message key="button.cancel" /></a>
			
			<%-- <s:submit type="button" cssClass="btn" method="cancel"
				key="button.cancel" theme="simple">
				<i class="icon-remove"></i>
				<fmt:message key="button.cancel" />
			</s:submit> --%>
		</div>
	</s:form>
</div>

<script type="text/javascript">
	$(document).ready(
			function() {
				$("input[type='text']:visible:enabled:first",
						document.forms['signupForm']).focus();
				
				$("#Verify").height($(":input[name='captcha']").outerHeight());
				
				$("#Verify").click(function(){  
		            $(this).attr("src","<c:url value='/getCaptcha?timestamp="+new Date().getTime())+"'/>";  
		        }); 
				
				/* $("#messagesContainer").hide(); */
				
				
				$("input[name='user.username']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.username" />'
				});
				$("input[name='user.password']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.password" />'
				});
				$("input[name='user.confirmPassword']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.confirmPassword" />'
				});
				$("input[name='user.companyName']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.companyName" />'
				});
				$(":input[name='user.idtype']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'hover',
					content : '<fmt:message key="signup.tip.idtype" />'
				});
				$("input[name='user.idnumber']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.idnumber" />'
				});
				$("input[name='user.address.address']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.address" />'
				});
				$("input[name='user.contactNumber']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.phoneNumber" />'
				});
				$("input[name='user.fax']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.fax" />'
				});
				$("input[name='user.email']").popover({
					title : '<fmt:message key="tip.title" />',
					trigger : 'focus',
					content : '<fmt:message key="signup.tip.email" />'
				});
				
			});
</script>
